/*
* @Author: ls-mac
* @Date:   2018-08-10 10:45:33
* @Last Modified by:   ls-mac
* @Last Modified time: 2018-08-10 10:52:37
*/
:global {
    .area-zoom-in-top-enter,
    .area-zoom-in-top-exit-active {
    opacity: 0;
    transform: scaleY(0)
    }

.area-zoom-in-top-enter-active,
.area-zoom-in-top-exit {
    opacity: 1;
    transform: scaleY(1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transform-origin: center top
}

.area-select-wrap {
    .area-select {
        margin-left: 10px;
    }
    .area-select-empty {
        padding: 4px 0;
        margin: 0;
        text-align: center;
        color: #999;
        font-size: 14px
    }
}


.area-select {
    position: relative;
    display: inline-block;
    vertical-align: top;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 24px;
    cursor: pointer;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e1e2e6;
    * {
        box-sizing: border-box
    }
}

.area-select:hover {
    border-color: #a1a4ad
}

.area-select.small {
    width: 126px
}

.area-select.medium {
    width: 100%;
}

.area-select.large {
    width: 194px
}

.area-select.is-disabled {
    background: #eceff5;
    cursor: not-allowed
}

.area-select.is-disabled:hover {
    border-color: #e1e2e6
}

.area-select.is-disabled .area-selected-trigger {
    cursor: not-allowed
}

.area-select .area-selected-trigger {
    position: relative;
    display: block;
    font-size: 12px;
    cursor: pointer;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 100%;
    line-height: 16px;
    padding: 4px 10px
}

.area-select .area-select-icon {
    position: absolute;
    top: 50%;
    margin-top: -2px;
    right: 6px;
    content: "";
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: #a1a4ad;
    transition: all .3s linear;
    transform-origin: center
}

.area-select .area-select-icon.active {
    margin-top: -8px;
    transform: rotate(180deg)
}

.area-selectable-list-wrap {
    position: absolute;
    width: 100%;
    max-height: 275px;
    z-index: 15000;
    /*border: 1px solid #a1a4ad;
    border-radius: 2px;*/
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    box-sizing: border-box;
    margin: 5px 0;
    overflow-x: hidden;
    overflow-x: auto
}

.area-selectable-list {
    position: relative;
    margin: 0;
    padding: 6px 0;
    width: 100%;
    font-size: 14px;
    color: #565656;
    list-style: none
}

.area-selectable-list .area-select-option {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding: 0 15px 0 10px;
    height: 32px;
    line-height: 32px
}

.area-selectable-list .area-select-option.hover {
    background-color: #e6f7ff
}

.area-selectable-list .area-select-option.selected {
    background-color: #e6f7ff;
    color: #1890ff;
    font-weight: 700
}

.cascader-menu-list-wrap {
    position: absolute;
    white-space: nowrap;
    z-index: 15000;
    /*border: 1px solid #a1a4ad;
    border-radius: 2px;*/
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);*/
    box-sizing: border-box;
    margin:  0;
    overflow: hidden;
    font-size: 0
}

.cascader-menu-list {
    position: relative;
    margin: 0;
    font-size: 12px;
    color: #565656;
    padding: 6px 0;
    list-style: none;
    display: inline-block;
    height: 204px;
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 160px;
    vertical-align: top;
    background-color: #fff;
    border-right: 1px solid #e4e7ed
}

.cascader-menu-list:last-child {
    border-right: none
}

.cascader-menu-list .cascader-menu-option {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding: 6px 10px;
    height: 32px;
    line-height: 22px
}

.cascader-menu-list .cascader-menu-option.hover,
.cascader-menu-list .cascader-menu-option:hover {
    background-color: #e6f7ff
}

.cascader-menu-list .cascader-menu-option.selected {
    background-color: #e6f7ff;
    color: #1890ff;
    font-weight: 700
}

.cascader-menu-list .cascader-menu-option.cascader-menu-extensible:after {
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 5px;
    content: "";
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: #a1a4ad
}

.area-selectable-list-wrap::-webkit-scrollbar,
.cascader-menu-list::-webkit-scrollbar {
    width: 8px;
    background: transparent
}

.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:decremen,
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:end:decrement,
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:increment,
.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:start:increment,
.cascader-menu-list::-webkit-scrollbar-button:vertical:decremen,
.cascader-menu-list::-webkit-scrollbar-button:vertical:end:decrement,
.cascader-menu-list::-webkit-scrollbar-button:vertical:increment,
.cascader-menu-list::-webkit-scrollbar-button:vertical:start:increment {
    display: none
}

.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical,
.cascader-menu-list::-webkit-scrollbar-thumb:vertical {
    background-color: #b8b8b8;
    border-radius: 4px
}

.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical:hover,
.cascader-menu-list::-webkit-scrollbar-thumb:vertical:hover {
    background-color: #777
}
}

